<template>
	<div id="news">
		<v-header>
			<price-header></price-header>
		</v-header>
		<div class="top">
			<div class="title width-1200"><span>资讯频道</span></div>
			<div class="types my-flex-left width-1200">
				<li class="hover" :class="[{'active':type==0}]" @click="changeType(0)">公告中心</li>
				<li class="hover" :class="[{'active':type==1}]" @click="changeType(1)">新闻资讯</li>
				<li class="hover" :class="[{'active':type==2}]" @click="changeType(2)">留成会客厅</li>
			</div>
		</div>

		<v-content class="width-1200">
			<div class="top-place"></div>
			<div class="lists">

				<div v-if="type==2">
					<reception></reception>
				</div>

				<div v-else class="one-card hover" v-for="item in tableData" @click="changeRouter('/newsDetail?id='+item.id+'&type='+type)">
					<div class="left">
						<span class="title">{{item.articleTitle}}</span>
						<div class="content two-row">
							<span>{{item.articleContent}}</span>
						</div>
						<span class="time">{{item.createTime | formNewsDate}}</span>
					</div>
					<div class="right" :style="{backgroundImage:'url('+item.articleCoverUrl+')'}"></div>
				</div>

				<!--分页-->
				<div class="page-change my-flex-center" v-if="tableData.length!=0 && type!=2">
					<div class="my-flex-center">
						<img src="../../assets/priceType/icon_left.png" @click="pageChange(params.pageNum-1)" alt="" />
						<span class="color-red">{{params.pageNum}}</span>
						<span> / {{Math.ceil(total/10)}}</span>
						<img src="../../assets/priceType/icon_right.png" @click="pageChange(params.pageNum+1)" alt="" />
						<span>跳转至第</span>
						<el-input-number size='mini' v-model="jumpPage" controls-position="right" :precision='0' :min="1" :max="Math.ceil(total/10)"></el-input-number>
						<span>页</span>
						<li class="jump bg-red my-btn" @click="pageChange(jumpPage)">跳转</li>
					</div>
				</div>
				<v-empty v-if="tableData.length==0"></v-empty>
			</div>
		</v-content>
	</div>
</template>

<script>
	import service from '@/js/services/news';
	import reception from './reception.vue';
	import bus from '@/js/common/bus.js';
	export default {
		name: 'news',
		components: {
			reception
		},
		data() {
			return {
				type: 0,
				url: 'http://pic.58pic.com/58pic/15/68/59/71X58PICNjx_1024.jpg',
				params: {
					pageNum: 1,
					pageSize: 10
				},
				total: 1,
				tableData: [],
				jumpPage:1
			}
		},
		mounted() {
			if(this.$route.query && this.$route.query.type) {
				this.type = this.$route.query.type;
			}
			this.getNewsList();
		},
		methods: {
			...service,
			changeType(type) {
				if(this.type == type) {
					return;
				}
				this.type = type;
				this.params.pageNum = 1;
				this.jumpPage = 1;
				this.getNewsList();
			},
			changeRouter(url) {
				this.$router.push(url);
			},
			pageChange(page, item, index) {
				let pageTotal = Math.ceil(this.total / 10);
				if(page < 1 || page > pageTotal || page==this.params.pageNum) {
					return;
				}
				this.params.pageNum = page;
				this.getNewsList(page, item, index);
			}
		},
		beforeRouteEnter(to, from, next) {
			if(from.path == '/price' && to.query && to.query.type) {
				next(vm => {
					vm.changeType(1);
				});
			} else {
				next();
			}
		}
	}
</script>

<style lang="less" src="../../less/page/news/index.less"></style>